<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="white" title="订单信息" :placeholder="true" bgColor="#3ACD90"  :titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>
		<view class="cell-box" style="background-color: #ffffff;">
			<!-- <view>
				<view>本月业绩：8888</view>
			</view>
			
			<view style="margin-top: 20rpx;margin-bottom: 20rpx;" class="vertical-divider"></view>
			 -->
			<view class="flex-center" style="display: flex;justify-content: space-between;">
				<view>订单时间</view>
				<view style="width: 540rpx;">
					<uni-datetime-picker @change="change" v-model="range" type="daterange" @maskClick="maskClick" rangeSeparator="至" />
				</view>
			</view>
		</view>
		
		<view class="cell-box-center cell-box " v-for="(item,index) in orderList" :key="index">
			<view class="cell-box-inner">
				<view>订单号：{{ item.order_sn}}</view>
				<view style="font-size:24rpx;color:#7D7D7D">{{item.pay_time}}</view>
			</view>
			
			<view class="cell-box-inner" style="font-size:24rpx;margin-top:20rpx">
				<view >订单交易额：{{item.total_price}}</view>
				<view>
					积分变动：<span style="color:#3ACD90;margin-left:20rpx">{{item.average_reward_rate * item.pay_price}}</span>
				</view>
			</view>
			<!-- <view class="cell-box-inner"  style="font-size:24rpx;">
				<view style="display: flex;">
					<view>订单类型: 扫码订单 </view>
				</view>
			</view> -->
		</view>
		
	</view>
</template>

<script>
import {
	myMerchantsOrderList
} from "@/common/apis/user.js"
import dayjs from 'dayjs';
export default{
	data(){
		return{
			orderList:[],
			range:"",
			startTime:'',
			endTime:'',
			mer_id:''
			
		}
	},
	onLoad(options) {
		this.mer_id = options.mer_id
		this.getMyMerchantsOrderList({mer_id:options.mer_id,limit:30})
	},
	methods:{
		getMyMerchantsOrderList(params){
			myMerchantsOrderList(params).then(res=>{
				console.log('res',res)
				if(res.status == 200){
					this.orderList = res.data.list
				}
				
			})
		},
		maskClick(){
			console.log(e)
		},
		change(e){
			console.log(e)
			
			const startTimestamp = dayjs(e[0]).valueOf();
			let startTime = Math.floor(startTimestamp / 1000);
			
			const endTimestamp = dayjs(e[1]).valueOf();
			let endTime = Math.floor(endTimestamp / 1000);
			
			this.getMyMerchantsOrderList({start:startTime,stop:endTime,mer_id:this.mer_id,limit:30})
		}
	}
}
</script>

<style scoped>
	.vertical-divider {
		width: 100%;
		height: 2rpx;
		background-color: #D8D8D8;
	
	}
	.cell-box-center{
		background-color: #ffffff;
		margin-top:30rpx;
		border-radius:20rpx ;
	}
	
	.cell-box{
		padding: 20rpx;
		align-items: center;
		justify-content: center;
	}
	
	.cell-box-inner{
		padding: 10rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}
</style>